JavaScript Performance

কীভাবে আপনার জাভাস্ক্রিপ্ট কোডের গতি বাড়ানো যায়

জাভাস্ক্রিপ্ট কর্মক্ষমতা

কীভাবে আপনার জাভাস্ক্রিপ্ট কোডের গতি বাড়ানো যায়

গতির পরামর্শ:

জাভাস্ক্রিপ্ট কর্মক্ষমতা উন্নতি উল্লেখযোগ্যভাবে আপনার ওয়েব অ্যাপ্লিকেশনের প্রতিক্রিয়া সময় উন্নত করতে পারে.

লুপগুলিতে কার্যকলাপ হ্রাস করুন

প্রোগ্রামিংয়ে প্রায়ই লুপ ব্যবহার করা হয়।

লুপের প্রতিটি বিবৃতি, ফর স্টেটমেন্ট সহ, লুপের প্রতিটি পুনরাবৃত্তিতে সম্পাদিত হয়।

বিবৃতি বা অ্যাসাইনমেন্ট যা লুপের বাইরে রাখা যেতে পারে তা লুপকে দ্রুত চালাতে সাহায্য করবে।

খারাপ কোড:

for (let i = 0; i < arr.length; i++) {

সেরা কোড:

let l = arr.length;
for (let i = 0; i < l; i++) {

প্রতিবার লুপটি পুনরাবৃত্তি করার সময় খারাপ কোড একটি অ্যারের দৈর্ঘ্য বৈশিষ্ট্য অ্যাক্সেস করে।

ভাল কোড লুপের বাইরে দৈর্ঘ্যের সম্পত্তি অ্যাক্সেস করে এবং লুপ দ্রুত চালায়।

DOM অ্যাক্সেস হ্রাস করুন

অন্যান্য জাভাস্ক্রিপ্ট স্টেটমেন্টের তুলনায় HTML DOM অ্যাক্সেস করা খুবই ধীর।

আপনি যদি একটি DOM উপাদান একাধিকবার অ্যাক্সেস করার আশা করেন, তবে এটি একবার অ্যাক্সেস করুন এবং এটি একটি স্থানীয় পরিবর্তনশীল হিসাবে ব্যবহার করুন:

উদাহরণ

const obj = document.getElementById("demo");
obj.innerHTML = "Hello";

DOM আকার হ্রাস করুন

HTML DOM-এ উপাদানের সংখ্যা ছোট রাখুন।

এটি সর্বদা পৃষ্ঠা লোডিং উন্নত করবে, এবং বিশেষ করে ছোট ডিভাইসে, রেন্ডারিং (পৃষ্ঠা প্রদর্শন) গতি বাড়াবে।

DOM অনুসন্ধান করার প্রতিটি প্রচেষ্টা (যেমন getElementsByTagName) একটি ছোট DOM থেকে উপকৃত হবে।

অপ্রয়োজনীয় পরিবর্তনশীল এড়িয়ে চলুন

আপনি যদি মান সঞ্চয় করার পরিকল্পনা না করেন তবে নতুন ভেরিয়েবল তৈরি করবেন না।

প্রায়ই আপনি এই মত কোড পরিবর্তন করতে পারেন:

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

সাথে:

document.getElementById("demo").innerHTML = firstName + " " + lastName;

জাভাস্ক্রিপ্ট লোডিং বিলম্বিত

আপনার প্রোগ্রামগুলিকে পৃষ্ঠার মূল অংশের নীচে রাখলে ব্রাউজারটিকে প্রথমে পৃষ্ঠাটি লোড করতে দেয়৷

যখন একটি প্রোগ্রাম ডাউনলোড করা হয়, ব্রাউজার অন্য কোন ডাউনলোড শুরু করে না। উপরন্তু সমস্ত পার্সিং এবং রেন্ডারিং অপারেশন ব্লক করা যেতে পারে।

HTTP স্পেসিফিকেশন সংজ্ঞায়িত করে যে ব্রাউজারগুলি সমান্তরালে দুটির বেশি উপাদান ডাউনলোড করা উচিত নয়।

একটি বিকল্প হল প্রোগ্রাম ট্যাগে defer="true" ব্যবহার করা। ডিফার অ্যাট্রিবিউট নির্দিষ্ট করে যে পৃষ্ঠাটি পার্স করার পরে প্রোগ্রামটি কার্যকর করা উচিত, তবে এটি শুধুমাত্র বহিরাগত প্রোগ্রামগুলির জন্য কাজ করে।

যদি সম্ভব হয়, পৃষ্ঠাটি লোড হওয়ার পরে, আপনি কোড সহ পৃষ্ঠায় আপনার প্রোগ্রামটি যোগ করতে পারেন:

উদাহরণ

<script>
window.onload = function() {
  const element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

সঙ্গে ব্যবহার করা এড়িয়ে চলুন

সঙ্গে কী ব্যবহার করা এড়িয়ে চলুন। এটি গতিতে নেতিবাচক প্রভাব ফেলে। এটি জাভাস্ক্রিপ্ট স্কোপগুলিকেও বিভ্রান্ত করে।

সঙ্গে কী কঠোর মোডে অনুমোদিত নয়।

জাভাস্ক্রিপ্ট কর্মক্ষমতা প্রশিক্ষণ

এই টিউটোরিয়াল আপনাকে আপনার জাভাস্ক্রিপ্ট কর্মক্ষমতা অপ্টিমাইজেশান জ্ঞান পরীক্ষা করতে সাহায্য করবে।

নিচের কোন লুপ কোডের পারফরম্যান্স সবচেয়ে ভালো?

for (let i = 0; i < document.getElementsByClassName('item').length; i++) {}
✗ ভুল! এটি প্রতিটি পুনরাবৃত্তিতে একটি DOM ক্যোয়ারী চালায়, যা ধীর
const items = document.getElementsByClassName('item'); for (let i = 0; i < items.length; i++) {}
✓ ঠিক আছে! এটি শুধুমাত্র একবার DOM ক্যোয়ারী চালায় এবং ফলাফলটিকে একটি ভেরিয়েবলে সঞ্চয় করে
for (let i = 0; i < 1000000; i++) { console.log(i); }
✗ ভুল! এটি console.log() কে এক মিলিয়ন বার কল করে, যা খুব ধীর
let i = 0; while(true) { if(i++ > 100) break; }
✗ ভুল! এটি একটি অসীম লুপ এড়াতে বিরতি বিবৃতির উপর নির্ভর করে